* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
  /*width: 100%;*/
  height: 100vh;
  background-color: #bbe2f4;
}

body {
  position: relative;
  overflow: hidden;
  min-width: 320px;
  max-width: 414px;
  height: 100vh;
  margin: 0 auto;
  background: url(../images/bg.png) no-repeat top center;
  background-size: contain;
}

.container {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.container img {
  display: block;
}

.text {
  position: absolute;
  z-index: 1200;
  top: 24.444vw;
  left: calc(50% - 34.722vw);
  width: 69.444vw;
}

.first-fish {
  position: absolute;
  bottom: 63.888vw;
  left: 0;
  width: 7.5vw;
}

.second-fish {
  position: absolute;
  bottom: 13.611vw;
  left: 0;
  width: 7.222vw;
}

.big-fish {
  position: absolute;
  bottom: 27.222vw;
  left: 0;
  width: 13.055vw;
}

.ice {
  position: absolute;
  bottom: 16.666vw;
  width: 63.611vw;
  left: calc(50% - 31.805vw);
}

.weixin {
  position: absolute;
  z-index: 2000;
  bottom: 40.833vw;
  width: 24.444vw;
  left: calc(50% - 12.222vw);
}

.bubble {
  position: absolute;
  z-index: 2000;
  bottom: 26.388vw;
  left: 10.277vw;
  width: 17.222vw;
}

.water {
  position: absolute;
  z-index: 1000;
  bottom: 0;
  width: 100%;
  height: 70vw;
  background: url(../images/water.png) repeat;
}

/*动画 样式*/

.active .first-fish {
  animation: animations01 8s linear infinite;
}

/*关键帧动画*/

@keyframes animations01 {
  0% {
    transform: translate(-7.5vw, 0);
  }
  100% {
    transform: translate(114.444vw, 0);
  }
}

.active .second-fish {
  animation: animations02 8s linear infinite;
}

@keyframes animations02 {
  0% {
    transform: translate(114.444vw, 0);
  }
  100% {
    transform: translate(-7.5vw, 0);
  }
}

.active .fish {
  animation: animations03 2s ease-out .1s forwards;
}

@keyframes animations03 {
  0% {
    transform: translate(-13.055vw, 0);
  }
  100% {
    transform: translate(5.555vw, 0);
  }
}

.active .bubble {
  animation: animations04 1s ease 2.3s forwards;
  opacity: 0;
}

@keyframes animations04 {
  0% {
    /*transform: matrix(.2, 0, 0, .2, 0, 60);*/
    transform: translate(0,18.75vw) scale(0.2,0.2);
    opacity: 0;
  }
  100% {
    /*transform: matrix(1, 0, 0, 1, 0, 0);*/
    transform: translate(0,0) scale(1,1);
    opacity: 1;
  }
}

/*.ice {
  transform: translate(0, 41.666vw);
}*/

.active .ice {
  animation: animations05 4s ease-out 0s forwards, animations06 1s linear 4.1s infinite;
}

@keyframes animations05 {
  0% {
    transform: translate(0, 41.666vw);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes animations06 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0.833vw);
  }
  100% {
    transform: translate(0, 0);
  }
}

.text {
  /*transform: translate(58.888vw, 0);*/
}

.active .text {
  animation: animations07 2s ease-out .1s forwards;
}

@keyframes animations07 {
  0% {
    transform: translate(58.888vw, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}


/*背景音乐*/

.music {
  position: absolute;
  z-index: 1001;
  top: 2.777vw;
  right: 2.777vw;
  width: 8.611vw;
  height: 8.611vw;
  cursor: pointer;
  background: url(../images/muted.png) no-repeat center;
  background-size: contain;
}

.music.active {
  background: url(../images/sound.png) no-repeat center;
  background-size: contain;
}
